<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>任务四：听指令的小方块（一）</title>
    <link rel="stylesheet" >
    <style type="text/css">
*{margin: 0;padding: 0;}
.container{width: 80%;margin: 20px auto;}
.block{width:50px;height: 50px;transition: all,0.5s;}
.block-head{height: 10px;background: brown;}
.block-body{height: 40px;background: cornflowerblue;}
.panel{display: flex;padding: 20px;box-shadow: 1px 0 5px 0 #ddd,-1px 0 5px 0 #ddd;}
table{border-collapse: collapse;}
td{position:relative;box-sizing:border-box;width: 50px;height: 50px;text-align: center;}
.control{ margin-left: 20px;}
.btn{width: 60px;height: 30px;background: #2256c8;margin-right:10px;color:#fff;outline:none;border:1px solid #2256c8;border-radius: 5px;
cursor: pointer;transition: color 0.3s,background 0.3s;}
.btn:hover{color: #2256c8;background: #fff;}
    </style>
</head>

<body>

    <div class="container">
        <div class="panel">
            <table border="1">
                <tbody>
                    <tr>
                        <td></td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>
                            <div class="block" id="block" style="transform: rotate(0deg);position: absolute;left: 0;top: 0;">
                                <div class="block-head"></div>
                                <div class="block-body"></div>
                            </div>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                <tfoot>

                </tfoot>
            </table>

            <div class="control">
                <div class="btns">
                    <button class="btn" id="go">GO</button>
                    <button class="btn" id="turn-left">TUN LEF</button>
                    <button class="btn" id="turn-right">TUN RIG</button>
                    <button class="btn" id="turn-back">TUN BAC</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function $(s) {
            return document.querySelector(s)
        }
        //获取元素角度，设置元素的旋转角度
        function angle(element,ang) {
            if ( arguments.length ===1 ) {
                var text = element.style.transform;
                text = text.substring(7,text.length-1);
                //console.log(text)
                text = parseInt(text);
                //console.log(text)
                return text;      //得到角度
            }

            if ( arguments.length === 2 ) {
                element.style.transform = "rotate(" + ang + "deg)" 
                return
            }
        }

        function turnRight() {
            var block = $('#block'),
                angleNow = angle(block);
                angleNow += 90;
                angle(block,angleNow);
        }

        function turnLeft() {
            var block = $('#block');
            angleNow = angle(block);
            angleNow -= 90;
            angle(block,angleNow)
        }

        function turnBack() {
            var block = $('#block');
            angleNow = angle(block);
            angleNow += 180;
            angle(block,angleNow)
        }

        function go() {
            var block = $('#block'),
                angleNow = angle(block);
                console.log(angleNow)

            angleNow = angleNow % 360;
            console.log(angleNow)
            //angleNow = angleNow >= 0 ? angleNow : (angleNow + 360);

            var left = parseInt(block.style.left),
                top = parseInt(block.style.top);

            if (angleNow === 0) {
                if(top >= 50 ) {
                    block.style.top = (top - 50) + "px";
                }
            }
            if (angleNow === 90) {
                if(left <= 400 ) {
                    block.style.left = (left + 50) + "px";
                }
            }
            if (angleNow === 180) {
                if(top <=400 ) {
                    block.style.top = (top + 50) + "px";
                }
            }
            if (angleNow === 270) {
                if(left >=50 ) {
                    block.style.left = (left - 50) + "px";
                }
            }
        }
        window.onload = function() {
            $('#go').onclick = go;
            $('#turn-left').onclick = turnLeft;
            $('#turn-right').onclick = turnRight;
            $('#turn-back').onclick = turnBack;
        }
    </script>
</body>
</html>